import React, { useState, useEffect, memo } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { doctormanagement_list, doctormanagement_addlist } from '../../../utils/Hospital Information/api'
import '../../../styles/Hospital Information/AddNewDoctor.scss'

import {
    Form,
    Input,
    Button,
    Select,
    DatePicker,
    Upload,
    notification
} from 'antd';

interface Props {

}
function AddNewDoctor(props: Props) {
    var navigate = useNavigate()
    const { TextArea } = Input;
    var [formlist, setFormlist] = useState([])

    useEffect(() => {
        doctormanagement_list().then((res) => {
            setFormlist(res.data)
        })
    }, [])

    // 添加表单验证通过，执行
    const onFinish = (values: any) => {
        // console.log(values);
        if (values) {
            doctormanagement_addlist(
                {
                    name: values.name,
                    head: "https://img0.baidu.com/it/u=1250551608,2180019998&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1669827600&t=965454cbee8e8e86d48619d8b8e8933a",
                    yard: values.yard,
                    title: values.title,
                    department: values.department,
                    label: [
                        "糖尿病",
                        "尿毒症",
                        "肾病"
                    ],
                    doctorprofile: values.doctorprofile,
                    key: formlist.length + 1
                }).then((res) => {
                    // console.log(res.data);
                    notification.success({ message: '添加成功！' });
                })
        }
    }

    var toDoctormanagement = () => {
        navigate('/index/hospitalinformation/doctormanagement');
    }

    return (
        <div className='addnewdoctor'>
            <p>新增医生信息</p>
            <div className="fromcountent">
                <Form
                    name="basic"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 18 }}
                    onFinish={onFinish}
                >
                    <Form.Item label="医生姓名" name="name">
                        <Input placeholder='请输入内容' />
                    </Form.Item>
                    <Form.Item label="上传照片" valuePropName="fileList" name="head">
                        <Upload action="/upload.do" listType="picture-card">
                            <div>
                                <PlusOutlined />
                                <div style={{ marginTop: 8 }}>Upload</div>
                            </div>
                        </Upload>
                    </Form.Item>
                    <Form.Item label="请选择院区" name="yard">
                        <Select>
                            <Select.Option value="东院区">东院区</Select.Option>
                            <Select.Option value="北院区">北院区</Select.Option>
                            <Select.Option value="湘南院区">湘南院区</Select.Option>
                        </Select>
                    </Form.Item>
                    <Form.Item label="请选择科室" name="department">
                        <Select>
                            <Select.Option value="内科">内科</Select.Option>
                            <Select.Option value="外科">外科</Select.Option>
                        </Select>
                    </Form.Item>
                    <Form.Item label="请选择医生职称" name="title">
                        <Select>
                            <Select.Option value="主任医师">主任医师</Select.Option>
                            <Select.Option value="副主任医师">副主任医师</Select.Option>
                            <Select.Option value="主治医师">主治医师</Select.Option>
                        </Select>
                    </Form.Item>
                    <Form.Item label="医生标签" name="lables">
                        <Select>
                            <Select.Option value="肝功能">肝功能</Select.Option>
                            <Select.Option value="肾功能">肾功能</Select.Option>
                            <Select.Option value="心脑血管">心脑血管</Select.Option>
                            <Select.Option value="泌尿学科">泌尿学科</Select.Option>
                            <Select.Option value="心脏病">心脏病</Select.Option>
                        </Select>
                    </Form.Item>
                    <Form.Item label="医生简介" name="doctorprofile">
                        <TextArea rows={4} placeholder="请输入内容" />
                    </Form.Item>
                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit">
                            确定
                        </Button>
                        <Button style={{ marginLeft: 20 }} onClick={() => { toDoctormanagement() }}>
                            取消
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
}


export default memo(AddNewDoctor);